<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="../../js/class/vue.min.js"></script>
	</head>
	<body>
		<style type="text/css">
			* {margin: 0;padding: 0;}
			body {
				background-color: darkgray;
				font-family: "宋体";
			}
			.billTitle {
				font-size: 7.4mm;
				text-align: center;
				font-weight: 600;
			}
			.paper {
				background-color: white;
				width: 210mm;
				height: 297mm;
				margin: 0 auto;
			}
			table {
				width: 100%;
				font-size: 3.4mm;
			}
			
			.tableHead {
				border-spacing: 0 4.5mm;
			}
			.tableHead td {
				width: 33.3%;
			}
			
			.billBody thead td {
				border-top: 1px black dashed;
				border-bottom: 1px black dashed;
			}
			.tableBody {
				border-spacing: 0 1.5mm;
			}
			.bill-container {
				padding: 10mm 15mm ;
			}
			.tableFoot tr {
				display: flex;
			}
			.tableFoot tr td {
				width: 100%;
			}
			.tableFoot tr td:nth-child(2) {
				text-align: center;
			}
			.seal {
				background: url(img/c602bc1e5ce7e660cafdf48b6221867.jpg) no-repeat;
				background-size: 30% 90%;
			}
		</style>
		<div id="vue-app">
			<div class="paper">
				<div id="billContainer" class="bill-container">
					<div class="billHeader">
						<p class="billTitle">{{billTitle}}</p>
						<div class="seal">
							<table class="tableHead">
								<tr>
									<td>客户名称：<span>{{userName}}</span></td>
									<td>信用卡号：<span>{{cardID}}</span></td>
									<td>账单年月：<span>{{billDate}}</span></td>
								</tr>
								<tr>
									<td>查询类型：<span>{{billType}}</span></td>
									<td>本期账单金额：<span>{{billMoney}}</span></td>
									<td>上期账单余额：<span>{{billUnrefund}}</span></td>
								</tr>
								<tr>
									<td>最小还款额：<span>{{minRefund}}</span></td>
									<td>本期已还金额：<span>{{refundMoney}}</span></td>
									<td>本期剩余未还金额：<span>{{unrefund}}</span></td>
								</tr>
								<tr>
									<td>最后还款日：<span>{{lastDate}}</span></td>
									<td></td>
									<td></td>
								</tr>
							</table>
						</div>
					</div>
					<div class="billBody">
						<table class="tableBody">
							<thead class="">
								<tr>
									<td>交易日期</td>
									<td>记账日期</td>
									<td>交易币种</td>
									<td>交易金额</td>
									<td>交易摘要</td>
								</tr>
							</thead>
							<tbody>
								<tr v-for="item in dataList" >
									<td>{{item.transDate}}</td>
									<td>{{item.keepAccDate}}</td>
									<td>{{item.currency}}</td>
									<td>{{item.transSum}}</td>
									<td>{{item.digest}}</td>
								</tr>
							</tbody>
						</table>
					</div>
					
					<div class="billFooter">
						<table class="tableFoot">
							<tr>
								<td>打印日期：<span>{{nowDate}}</span></td>
								<td>第<span>{{page}}</span>/共<span>{{allPage}}</span>页</td>
								<td></td>
							</tr>
						</table>
					</div>
				</div>
			</div>
		</div>
		
		<script type="text/javascript">
			var dataList = [
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				{"transDate":"20190630","keepAccDate":"20190630","currency":"CNY-人民币","transSum":"10.00","digest":"jianyimiaoshuceshi30"},
				];
			var date = new Date();
			var nowDate = date.toLocaleString();
			var vm = new Vue({
				el:"#vue-app",
				data:{
					billTitle:"账单头及账单查询打印",
					userName:"新卡六",
					cardID:"628343100000028",
					billDate:"201907",
					billType:"已出账单",
					billMoney:"1789.30",
					billUnrefund:"112.70",
					minRefund:"181.63",
					refundMoney:"100",
					unrefund:"1789.30",
					lastDate:"20190711",
					dataList: dataList,
					nowDate:nowDate,
					page:"1",
					allPage:"3",
				}
			})
		</script>
	</body>
</html>